<template>
  <div class="login">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="main">
      <van-steps
        :active="0"
        class="setp"
        active-icon="success"
        active-color="#38f"
      >
        <van-step>提交问题</van-step>
        <van-step>问诊咨询</van-step>
        <van-step>医生建议</van-step>
        <van-step>医生评价</van-step>
      </van-steps>
      <div class="my-card patients" @click="showSheet = true">
        <div>
          <h2>刘海</h2>
          <p><span>男</span><span>30岁</span><span>184****4893</span></p>
        </div>
        <van-icon name="arrow" size="20" />
      </div>

      <div class="my-card description">
        <h2>描述病情</h2>
        <van-field
          :autosize="autosize"
          placeholder="为了更好的获得医生的帮助，请尽可能详细描述您的病情。"
          type="textarea"
        />
        <h2>上传检查单/患处照片</h2>
        <van-uploader />
      </div>

      <van-submit-bar :price="3050" button-text="提交订单" />
    </div>

    <van-action-sheet v-model:show="showSheet" title="选择就诊人">
      <div class="content">
        <div
          v-for="index in 10"
          :key="index"
          class="my-mini-card patients"
          :class="{ select: select != index }"
          @click="select = index"
        >
          <div>
            <h3>刘海</h3>
            <p><span>男</span><span>30岁</span><span>184****4893</span></p>
          </div>
          <span class="edit"
            ><i style="color: #4fc08d" v-show="select == index">已选择</i
            ><i v-show="select == index">|</i
            ><van-icon @click="showPopup = true" size="21px" name="edit"
          /></span>
        </div>
        <van-button round type="primary" size="large" @click="showPopup = true"
          >新增就诊人</van-button
        >
      </div>
    </van-action-sheet>

    <van-popup v-model:show="showPopup" position="right" class="my-popup">
      <van-nav-bar
        left-text="返回"
        title="患者信息"
        left-arrow
        @click-left="showPopup = false"
      />
      <div class="main">
        <van-form @failed="onFailed">
          <!-- 通过 pattern 进行正则校验 -->
          <van-field
            v-model="state.username"
            name="name"
            label="问诊人"
            placeholder="请输入问诊人姓名"
            :rules="[{ required: true, message: '请输入问诊人姓名' }]"
          />
          <van-field name="sex" label="性别">
            <template #input>
              <van-radio-group v-model="state.sex" direction="horizontal">
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="state.birth"
            readonly
            clickable
            name="birth"
            label="出生日期"
            placeholder="点击选择日期"
            :rules="[{ required: true, message: '请输入选择出生日期' }]"
            @click="showCalendar = true"
          />
          <van-field
            placeholder="请输入手机号"
            v-model="state.tel"
            name="tel"
            type="tel"
            label="手机号"
            :rules="[{ required: true, message: '请输入输入手机号' }]"
          />
          <van-field
            placeholder="请输入病例信息"
            v-model="state.medicalHistory"
            name="medicalHistory"
            type="textarea"
             rows="4"
              show-word-limit
            label="病例信息"
            maxlength="50"
            :rules="[{ required: true, message: '请输入病例信息' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              保存
            </van-button>
          </div>
        </van-form>
      </div>
      <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";

export default {
  name: "OrderInfo",
  setup() {
    const showSheet = ref(false);
    const showPopup = ref(false);
    const showCalendar = ref(false);
    const select = ref(1);
    const autosize = reactive({
      maxHeight: 400,
      minHeight: 200,
    });
    //实例化路由
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };

    const state = reactive({
      name: "", //姓名
      sex: "1", //性别
      birth: "", //出生日期
      local: "", //位置
      tel: "", //手机号
      medicalHistory: "", //病史
    });

    //表单校验 失败
    const onFailed = (errorInfo) => {
      console.log("failed", errorInfo);
    };
    //日历选择
    const onConfirm = (date) => {
      console.log(date);
      state.birth = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      showCalendar.value = false;
    };

    return {
      onClickLeft,
      state,
      showSheet,
      select,
      autosize,
      showPopup,
      onFailed,
      showCalendar,
      onConfirm,
    };
  },
};
</script>

<style>
.content {
  padding: 16px 16px 16px;
}
.main {
  padding: 10px;
  padding-bottom: 50px;
}
.setp {
  margin-bottom: 24px;
}
.my-card {
  margin-bottom: 24px;
  padding: 24px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 12px #ebedf0;
}
.my-mini-card {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 12px #ebedf0;
}
.patients {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.patients h3 {
  margin: 0;
  padding: 0;
}
.my-mini-card {
  padding-left: 20px;
}
.my-mini-card p {
  margin: 0;
  margin-top: 2px;
  padding: 0;
}
.patients p span {
  color: #969799;
  margin-right: 10px;
}
.my-mini-card .edit {
  display: flex;
}
.my-mini-card .edit i {
  margin-right: 10px;
}
.content .select {
  background-color: #ebfff0;
}

.description .van-field__control {
  background: #f7f7f7;
  border: #e0e0e0 solid 1px;
  padding: 10px;
  border-radius: 5px;
}
.description {
  text-align: left;
}
.description h2 {
  margin-bottom: 20px;
}
.description .van-cell {
  padding: 0;
}
.my-popup {
  height: 100%;
  width: 100%;
}
.my-popup .save {
  padding: 20px;
}
</style>